<!-- 轮播组件 -->
<template>
  <view
    class="swiper-area padding-lr-sm pos-r"
    v-if="props.swiperDatas && props.swiperDatas.length > 0"
  >
    <uni-swiper-dot
      :info="props.swiperDatas"
      :current="current"
      :dots-styles="dotsStyles"
      field="name"
      :mode="props.mode"
    >
      <swiper
        class="swiper w-full"
        :style="{ height: props.swiperHeight }"
        :autoplay="props.autoplay"
        :circular="props.circular"
        @change="change"
      >
        <swiper-item
          class="swiper-item wh-full box-sizing-b uni-bg-blue"
          v-for="(item, index) in props.swiperDatas"
          :key="index"
        >
          <view class="wh-full" @click.stop="topage(item)">
            <image
              class="border-radius wh-full"
              mode="aspectFill"
              :lazy-load="true"
              :src="item.img"
            />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { url_params } from '@/utils';
  import { ImageModel } from '@/types/fileModel';
  import { router } from '@/utils/router';

  const props = defineProps({
    swiperDatas: {
      type: Array<ImageModel>,
      default: () => [],
    },
    swiperHeight: {
      type: String,
      default: () => '240rpx',
    },
    autoplay: {
      // 自动播放
      type: Boolean,
      default: () => true,
    },
    circular: {
      // 是否采用衔接滑动，即播放到末尾后重新回到开头
      type: Boolean,
      default: () => true,
    },
    mode: {
      // 指示点的类型,可选值: default/dot/round/nav/indexes
      type: String,
      default: () => 'dot',
    },
  });

  // 当前指示点索引,必须是通过swiper的change事件获取到的e.detail.current
  const current = ref<number>(0);
  // info 轮播图的数据，通过数组长度决定指示点个数
  // dotsStyles 指示点样式
  const dotsStyles = reactive({
    // 指示点宽度,在mode=nav、mode=indexes时不生效
    width: 8,
    // 指示点距swiper底部的高度
    bottom: 8,
    // 指示点前景色,只在mode=nav,mode=indexes时生效
    color: '#fff',
    // 未选择指示点背景色
    backgroundColor: 'rgba(255, 255, 255,0.6)',
    // 未选择指示点边框样式
    border: '1px rgba(255, 255, 255,0.6) solid',
    // 已选择指示点背景色，在mode=nav时不生效
    selectedBackgroundColor: 'rgba(250, 44, 25,0.9)',
    // 已选择指示点边框样式，在mode=nav时不生效
    selectedBorder: '1px rgba(250, 44, 25,0.9) solid',
  });

  // swiper-change, event.detail = {current: current, source: source}
  const change = (e: any) => {
    current.value = e.detail.current;
  };
  // 点击图片跳转详情
  const topage = (item: any) => {
    router.push(
      item.url +
        url_params({
          id: item.id,
          type: item.type,
        }),
    );
  };
</script>

<style lang="scss"></style>
